import React from 'react';
import styles from './Registered.css';
import { Form,FormGroup,Col,FormControl,Checkbox,ControlLabel,Button  } from 'react-bootstrap';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
} from 'react-router-dom'
import MyModule from './MyModule.js'
let styleObj={
    _padding:{
        'paddingLeft':'0px',
        'paddingRight':'0px'
    },
    errorColor:{
        color:'red',
        fontSize:'12px',
        paddingLeft:'0px',
    }
};
class FormInstance extends React.Component{
    constructor(){
        super();
        this.state={
            isGlyLogin:false,
        };
        this.dutiesSelect=this.dutiesSelect.bind(this);
    }
    dutiesSelect(e){
        if(e.target.value==='2'){
            this.setState({isGlyLogin:true})
        }else {
            this.setState({isGlyLogin:false})
        }
    }
    render(){
        console.log(this.props.registeredClick);
        return(
            <Form horizontal>
                <FormGroup controlId="dutiesSelect">
                     <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                        职务:
                    </Col>
                    <Col sm={10} style={styleObj._padding}>
                        <FormControl componentClass="select" placeholder="select" onChange={this.dutiesSelect}>
                            <option value="1">学生</option>
                            <option value="2">管理员</option>
                        </FormControl>
                    </Col>
                 </FormGroup>
                {
                    this.state.isGlyLogin?(
                        <div>
                            <FormGroup controlId="sexId">
                                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                                    性别:
                                </Col>
                                <Col sm={10} style={styleObj._padding}>
                                    <FormControl componentClass="select" placeholder="select">
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </FormControl>
                                </Col>
                            </FormGroup>
                            <FormGroup  controlId="ageId">
                                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                                  年龄:
                                </Col>
                                <Col sm={10} style={styleObj._padding} >
                                    <FormControl type="text" placeholder="请输入年龄"/>
                                </Col>
                            </FormGroup>
                            <FormGroup  controlId="addressId" >
                                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                                地址:
                                </Col>
                                <Col sm={10} style={styleObj._padding} >
                                    <FormControl type="text" placeholder="请输地址"/>
                                </Col>
                            </FormGroup>
                            <FormGroup  controlId="manage_id" >
                                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                                    编号:
                                </Col>
                                <Col sm={10} style={styleObj._padding} >
                                    <FormControl type="text" placeholder="请输管理员编号"/>
                                </Col>
                            </FormGroup>
                        </div>
                    ):(
                        <div>
                            <FormGroup controlId="collegeId">
                                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                                学院:
                                </Col>
                                <Col sm={10} style={styleObj._padding}>
                                    <FormControl type="text" placeholder="请输入学院"/>
                                </Col>
                            </FormGroup>
                            < FormGroup  controlId="classId" >
                                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                                班级:
                                </Col>
                                <Col sm={10} style={styleObj._padding} >
                                    <FormControl type="text" placeholder="请输入班级"/>
                                </Col>
                            </FormGroup>
                            <FormGroup  controlId="student_id" >
                                <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                                    学号:
                                </Col>
                                <Col sm={10} style={styleObj._padding} >
                                    <FormControl type="text" placeholder="请输入学号"/>
                                </Col>
                            </FormGroup>
                        </div>
                    )
                }
                <FormGroup  controlId="nameId" >
                    <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                    姓名:
                    </Col>
                    <Col sm={10} style={styleObj._padding} >
                        <FormControl type="text" placeholder="请输入姓名"/>
                    </Col>
                </FormGroup>
                <FormGroup  controlId="phoneId" >
                    <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                    电话:
                    </Col>
                    <Col sm={10} style={styleObj._padding} >
                        <FormControl type="text" placeholder="请输入电话"/>
                    </Col>
                </FormGroup>

                <FormGroup controlId="formPassword" >
                    <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                    密码:
                    </Col>
                    <Col sm={10} style={styleObj._padding}>
                        <FormControl type="password" placeholder="请输入用户密码"/>
                    </Col>
                </FormGroup>
                <FormGroup controlId="againPassword" >
                    <Col componentClass={ControlLabel} sm={2} style={styleObj._padding}>
                    密码确认:
                    </Col>
                    <Col sm={10} style={styleObj._padding}>
                        <FormControl type="password" placeholder="请再次输入密码"/>
                    </Col>
                </FormGroup>
                {/*{isError?(<FormGroup >*/}
                    {/*<Col sm={10} smOffset={2} style={styleObj._padding,styleObj.errorColor} >*/}
                        {/*两次输入密码不一致*/}
                    {/*</Col>*/}
                {/*</FormGroup>):null}*/}
                <FormGroup>
                    <Col sm={12} style={styleObj._padding}>
                        <Button bsStyle="primary"  style={{'width':'100%'}} onClick={this.props.x1}>注册</Button>
                    </Col>
                </FormGroup>
                <Link to="/login" className={styles.back}>返回</Link>
            </Form>
        )
    }
}

class Registered extends React.Component{
    constructor(){
        super();
        this.state={
            inputPasswordError:false,
            isDisplayModule:false,
        };
        this.registeredClick=this.registeredClick.bind(this);
    }
    registeredClick(){
        let _passwordDom=document.getElementById('formPassword');
        let _againPasswordDom=document.getElementById('againPassword');
        if(_passwordDom.value!=_againPasswordDom.value){
            this.setState({inputPasswordError:true,isDisplayModule:false});
            return ;
        }
        this.setState({inputPasswordError:false});


        let _nameDom=document.getElementById('nameId');
        console.log('_nameDom.value',_nameDom.value);
        let _phoneDom=document.getElementById('phoneId');
        let _dutiesSelectDome=document.getElementById('dutiesSelect');

        //学生信息
        let _collegeDom=document.getElementById('collegeId');
        let _classDom=document.getElementById('classId');
        let _student_idDom=document.getElementById('student_id');


        //管理员信息
        let _sexeDom=document.getElementById('sexId');
        let _ageDom=document.getElementById('ageId');
        let _addressDom=document.getElementById('addressId');
        let _manage_idDom=document.getElementById('manage_id');


        let _url='http://library.loverent.cn:8080/students/post/';
        let data={
            name:_nameDom.value,
            phone:_phoneDom.value,
            password:_passwordDom.value,
            type:_dutiesSelectDome.value
        };
        if(_dutiesSelectDome.value==='1'){
            data.college=_collegeDom.value;
            data.class=_classDom.value;
            data.student_id=_student_idDom.value;

        }else {
            data.sex=_sexeDom.value;
            data.age=_ageDom.value;
            data.address=_addressDom.value;
            data.manage_id=_manage_idDom.value;
        }

        console.log('data',data);
        fetch('http://library.loverent.cn:8080/students/post', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',//client能够接收的种类和类型
                'Content-Type': 'application/json' //表示正文的类型,不加 'Content-Type': 'application/json' then(response => response.json())报错
            },
            body: JSON.stringify(data)  //注意要把data转换成json格式
        }).then(response => response.json())
            .then(data=>{
                console.log(data);
                if(data.code===1){
                    this.setState({isDisplayModule:true});
                }
            });
        // fetch('http://library.loverent.cn:8080/students/post',{
        //     method: "POST",
        //     headers: {
        //         "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
        //     },
        //     body: `college=${data.college}&class=${data.class}&student_id=${data.student_id}&name=${data.name}&phone=${data.phone}&password=${data.password}& type=${data.type}`
        // }).then(response=>response.json())
        // .then(json=>{
        //     console.log('-----',json);
        //     if(json.code===1){
        //         this.setState({isDisplayModule:true});
        //     }
        // }).catch(function(error) {
        //     console.log('There has been a problem with your fetch operation: ' + error.message);
        // });

    }
    render(){
        return(
            <div className={styles.root}>
                <h3 className={styles.h3_title}>注册界面</h3>
                <div className={styles.formbox}>
                    <FormInstance x1={this.registeredClick} />
                    {/*{formInstance(this.registeredClick,this.state.inputPasswordError)}*/}
                </div>
                {
                    this.state.isDisplayModule?<MyModule showModal={this.state.isDisplayModule} />:''
                }
            </div>
        )
    }
}
export default Registered;